<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 200px;"></div>
    <script>
        //offset与style的区别

        /* 
           offset:
              offset可以得到任意样式表中的样式值。
              offset系列获得的数值是没有单位的。
              offsetWidth包含padding + border + width
              offsetWidth等属性只是读属性，只获取不能赋值
              所以，我们想要获取元素大小位置，用offset更合适
        */

         /* 
           style:
              style只能获得到行内样式表中的样式
              style.width获得的是带有单位的字符串
              style.width获得不包含padding和border的值
              style.width是可读写属性，可以获取也可以赋值
              所以，我们想要给元素更改值，则需要用到style改变
        */
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);
        console.log(box.style.width);
        //box.offsetwidth = '300px'; 无效。
        box.style.width = '300px';
    </script>
</body>
</html>